<template>
    <div id="session_list">
        <div class="row">
            <div class="col-md-12">      
                <condition @getSessionCondition="getCondition"></condition>  
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <el-table :data="sessions" size="small" border style="width: 100%">
                    <el-table-column type="expand">
                        <template slot-scope="scope">
                            <div class="row">
                                <div class="col-md-8">
                                    <session-compete-list :data="scope.row.SessionCompetes"></session-compete-list>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="SessionId" label="编号" width="60"></el-table-column>
                    <el-table-column align="center" label="类型" width="80">
                        <template slot-scope="scope">
                            <span>{{ typeFormat(scope.row.SessionType) }}</span>
                        </template>   
                    </el-table-column>                    
                    <el-table-column align="center" label="项目" width="150">
                        <template slot-scope="scope">
                            <span>{{ eventFormat(scope.row.CompeteEvent) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="组别" width="120">
                        <template slot-scope="scope">
                            <span>{{ words.groups[scope.row.CompeteGroup] }}</span>
                        </template>   
                    </el-table-column>
                    <el-table-column align="center" prop="SessionName" label="场次" width="120"></el-table-column>
                    <el-table-column align="center" label="人数" width="60">
                        <template slot-scope="scope">
                            <span>{{ scope.row.SessionCompetes.length }}</span>
                        </template>   
                    </el-table-column>
                    <el-table-column align="center" label="时间" width="200">
                        <template slot-scope="scope">
                            <span>{{ scope.row.SessionTime0 | time }} - {{ scope.row.SessionTime1 | time1 }}</span>
                        </template>   
                    </el-table-column> 
                    <el-table-column align="center" label="地点" width="200">
                        <template slot-scope="scope">
                            <span>{{ scope.row.SessionRoom }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="Jury0" label="评委组长" width="100"></el-table-column>
                    <el-table-column align="center" prop="Jury1" label="评委1" width="100"></el-table-column>
                    <el-table-column align="center" prop="Jury2" label="评委2" width="100"></el-table-column>
                    <el-table-column align="center" prop="Jury3" label="评委3" width="100"></el-table-column>
                    <el-table-column align="center" prop="Jury4" label="评委4" width="100"></el-table-column>
                    <el-table-column align="center" prop="Jury5" label="评委5" width="100"></el-table-column>
                    <el-table-column align="center" prop="Jury6" label="评委6" width="100"></el-table-column>
                    <!-- <el-table-column align="center" prop="Jury7" label="评委7" width="100"></el-table-column> -->
                    <!-- <el-table-column align="center" prop="Jury8" label="评委8" width="100"></el-table-column> -->
                    <el-table-column align="center" prop="Recorder" label="录入人" width="100"></el-table-column>
                    <el-table-column align="center" prop="Reviewer" label="审核人" width="100"></el-table-column>
                    <el-table-column fixed="right" align="center" label="操作" :width="operWidth">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" @click="showLargeScreen(scope.row)" v-if="authorize(['ROOT','OPERATOR'])">大屏</el-button>
                            <el-button size="mini" type="primary" @click="modify(scope.row)" v-if="authorize(['ROOT','ADMIN'])">修改</el-button>
                            <el-button size="mini" type="primary" @click="resultsInput(scope.row)">成绩</el-button>
                            <el-button size="mini" type="success" @click="exportCompete(scope.row)" v-if="authorize(['ROOT','ADMIN'])">导出比赛</el-button>
                            <el-button size="mini" type="success" @click="exportOrderBook(scope.row)" v-if="authorize(['ROOT','ADMIN'])">导出秩序册</el-button>
                            <el-button size="mini" type="success" @click="exportScoreSheet(scope.row)" v-if="authorize(['ROOT','ADMIN'])">导出评分表</el-button>
                            <el-button size="mini" type="danger" @click="remove(scope.row, scope.$index)" v-if="authorize(['ROOT'])">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination background layout="total, sizes, prev, pager, next" :page-sizes="[10, 20, 50]" @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="pageCount"></el-pagination>
            </div>            
        </div>
        <el-dialog title="比赛场次修改" width="75%" :visible.sync="dialogVisible">
            <session-modify-dialog :data="session" ref="modifyDialog"></session-modify-dialog>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveModify()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>

import Condition from './condition.vue';
import SessionCompeteList from './session_compete_list.vue';
import SessionModifyDialog from './session_modify.vue';
import {DeepClone, ShowSuccess, TimeFormat, TimeFormat1} from 'web/utils';
import _findIndex from 'lodash/findIndex';

export default {
    components: {
        Condition,
        SessionCompeteList,
        SessionModifyDialog
    },
    filters: {
        time: TimeFormat,
        time1: TimeFormat1
    },
    data() {
        return {
            sessions: [],
            session: {},
            pageCount: 0,
            pageSize: 10,
            condition: { },
            words: {
                events: {},
                groups: {}
            },
            operWidth: 160,
            dialogVisible: false
        }
    },
    mounted() {
        if (this.authorize(['ROOT'])) {
            this.operWidth = 600;
        }
        // 加载词语
        this.$DataService.GetWordDictByCode('COMPETE_GROUP')
            .then(ret => {
                this.words.groups = ret;
            });
        this.$DataService.GetWordDictByCode('SOLO_COMPETE_EVENT')
            .then(ret => {
            let events = ret;
            this.$DataService.GetWordDictByCode('ENSEMBLE_COMPETE_EVENT')
                .then(ret => {
                    for(let key in ret) { events[key] = ret[key]; }
                    this.words.events = events;
                });
            });
        
        this.query(null);
    },
    methods: {
        typeFormat: function(val) {
            switch(val.toUpperCase()) {                
                case 'PRELIMINARY': return '初赛';
                case 'REMATCH': return '复赛';
                case 'FINALS': return '决赛';
            }
        }, 

        eventFormat: function(val) {
            if (val == 'TREMOLO_SOLO_OPEN') val = 'TREMOLO_SOLO';
            if (val == 'CHROMATIC_SOLO_OPEN') val = 'CHROMATIC_SOLO';
            return this.words.events[val];
        },       

        // 处理页面索引变化消息
        handleCurrentChange(val) {
            this.$SessionService.QuerySessions(this.condition, val, this.pageSize)
                .then(ret => {
                    this.sessions = ret;
                });            
        },

        handleSizeChange(val) {
            this.pageSize = val;
            this.query(this.condition);
        },

        // 获取查询条件并进行查询
        getCondition(condition) {
            this.condition = condition;
            this.query(this.condition);
        },

        // 条件查询
        query(condition) {
            var _condition = DeepClone(condition);
            if (_condition && _condition.Events) {
                // 处理特殊的公开组比赛
                if (_condition.Events.findIndex(v => v == 'TREMOLO_SOLO') > -1) {
                    _condition.Events.push('TREMOLO_SOLO_OPEN');
                }
                if (_condition.Events.findIndex(v => v == 'CHROMATIC_SOLO') > -1) {
                    _condition.Events.push('CHROMATIC_SOLO_OPEN');
                }
            }
            Promise.all([
                this.$SessionService.QuerySessionsCount(_condition),
                this.$SessionService.QuerySessions(_condition, 1, this.pageSize)
            ]).then(ret => {
                this.pageCount = ret[0];
                this.sessions = ret[1];
            });
        },

        showLargeScreen(session) {
            this.$router.push({path: `/ppt/${session.SessionId}`});
        },

        modify(session) {
            this.session = DeepClone(session);
            this.dialogVisible = true;
        },

        // 保存比赛场次信息修改
        saveModify() {
            this.$refs.modifyDialog.save()
                .then(ret => {
                    let index = _findIndex(this.sessions, { SessionId: ret.SessionId });
                    this.sessions[index].SessionName = ret.SessionName;
                    this.sessions[index].SessionTime0 = ret.SessionTime0;
                    this.sessions[index].SessionTime1 = ret.SessionTime1;
                    this.sessions[index].SessionType = ret.SessionType;
                    this.sessions[index].SessionRoom = ret.SessionRoom;
                    for (let i = 0; i < 9; i++) {
                        this.sessions[index]['Jury'+i] = ret['Jury'+i];
                    }
                });
            this.dialogVisible = false;
        },

        resultsInput(session) {
            this.$router.push({path: `/score/${session.SessionId}`});
        },

        exportCompete(session) {
            this.$SessionService.ExportScore(session);
        },

        exportOrderBook(session) {
            this.$SessionService.ExportOrderBook(session);
        },

        exportScoreSheet(session) {
            this.$SessionService.ExportScoreSheet(session);
        },

        remove(session, index) {
            let me = this;
            this.$SessionService.RemoveSession(session)
                .then(ret => {
                    if(ret) {
                        me.sessions.splice(index, 1);
                    }
                })
        }
    }
}
</script>

<style>

</style>
